<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>12.16课堂作业</title>
		<!-- <link rel="stylesheet" href="css/12.16课堂作业.css" type="text/css"> -->
		<link rel="stylesheet" href="css/12.16课堂作业.css" type="text/css"/>
	</head>
	<body>
		<h3>练习1</h3>
		<ul>
		<li>
			<div id="price">
		    <table align="center" border="" cellspacing="3" cellpadding="15">
		        <tr>
		            <td align="center" colspan="4">菜价单</td>
		        </tr>
		        <tr>
		            <td rowspan="4">序号</td>
		            <td>菜名</td>
		            <td>菜价</td>
		        </tr>
		        <tr>
		            <td>白菜</td>
		            <td>3¥</td>
		        </tr>
		        <tr>
		            <td>青菜</td>
		            <td>3¥</td>
		        </tr>
		        <tr>
		            <td>芹菜</td>
		            <td>3¥</td>
		        </tr>
		    </table>
		</div>
		</li>	
		<li>
			<div id="kecheng">
		        <h2 align="center">课程计划表</h2>
		        <span>
		            <table align="center" border="1" cellspacing="0" cellpadding="10">
		                <tr>
		                    <td rowspan="4" align="center">课表</td>
		                    <td colspan="5" align="center">上课</td>
		                    <td colspan="2" align="center">休息</td>
		                </tr>
		                <tr>
		                    <td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td>
		                    <td>星期五</td><td>星期六</td><td>星期日</td>
		                </tr>
		                <tr align="center">
		                    <td>计算机</td><td>计算机</td><td>计算机</td><td>计算机</td>
		                    <td>计算机</td><td>复习</td><td>休息</td>
		                </tr>
		            </table>
		        </span>
		    </div>
		</li>	
		</ul>
		
		<br /><br />
		
		<h3>练习2</h3>
		<div id="login" align="center">
		        <h2>会员登录</h2>
		        <form method="post">
					<table>
					    <tr>
					        <td align="right">用户名:&nbsp;&nbsp;</td>
					        <td><input type="text" placeholder="请输入邮箱/ID/手机号" name="username" autofocus /></td>
					    </tr>
					    <tr>
					        <td align="right">密码:&nbsp;&nbsp;</td>
					        <td><input type="password" placeholder="请输入密码" name="password" /></td>
					    </tr>
						<tr>
						    <td>
						        
						    </td>
						</tr>
					</table>
		            
		            <span id="span1">
						<br />
		                <input type="image" id="image" src="img/login.png">&nbsp;&nbsp;&nbsp;<input type="checkbox" name="hobby" value="ball" />两周内自动登录<br />
						<a href="" >忘记密码？点我找回</a><br><br>
		            </span>
		            <span id="span2">
		                其他登录方式：
		                <a href=""><img src="img/ico1.png" alt="qq账号">    qq账号  </a>
		                <a href=""><img src="img/ico2.png" alt="新浪微博">  新浪微博  </a>
		                <a href=""><img src="img/ico3.png" alt="百度账号">  百度账号  </a><br><br>   
		            </span>
		            <a href="" >还不是会员？立即注册</a>
		        
		        <br><br>
		    </div>
		
		<h3>练习3</h3>
		<form action="#" method="post">
		    <table align="center">
		        <caption><h3>用户注册</h3></caption>
		        <tr>
		            <td>
		                <fieldset>
		                    <legend>身份验证-必填信息</legend>
		                    <table>
		                        <tr>
		                            <td align="right">用户名</td>
		                            <td><input type="text" placeholder="请输入用户名" name="username" autofocus /></td>
		                        </tr>
		                        <tr>
		                            <td align="right">密码</td>
		                            <td><input type="password" placeholder="请输入密码" name="password" /></td>
		                        </tr>
		                        <tr>
		                            <td align="right">确认密码</td>
		                            <td><input type="password" placeholder="请输入密码" name="repassword" /></td>
		                        </tr>
		                    </table>
		                </fieldset>
		            </td>
		        </tr>
		        <tr>
		            <td>
		                <fieldset>
		                    <legend>身份信息-选填信息</legend>
		                    <table>
		                        <tr>
		                            <td align="right">所在城市</td>
		                            <td>
		                                <!-- multiple -->
		                                <select name="city" >
		                                    <option value="shanghai">上海</option>
		                                    <option value="beijing">北京</option>
		                                    <option value="hangzhou" selected>杭州</option>
		                                </select>
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">性别</td>
		                            <td>
		                                <input type="radio" name="gender" value="male" />男
		                                <input type="radio" name="gender" value="female"/>女
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">头像</td>
		                            <td>
		                                <input type="file" name="avatar" multiple />
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">爱好</td>
		                            <td>
		                                <input type="checkbox" name="hobby" value="sing" />唱
		                                <input type="checkbox" name="hobby" value="jump" checked />跳
										<input type="checkbox" name="hobby" value="basketball" checked />篮球
		                                <input type="checkbox" name="hobby" value="rap"  checked />rap
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">生日</td>
		                            <td>
		                                <input type="date" name="birthday" />
		                                <input type="datetime-local" name="birthday" />
		                                <input type="week" name="birthday" />
		                            </td>
		                        </tr>
		                    </table>
		                </fieldset>
		            </td>
		        </tr>
		        <tr>
		            <td>
		                <fieldset>
		                    <legend>其它个人信息</legend>
		                    <table>
		                        <tr>
		                            <td align="right">邮箱</td>
		                            <td>
		                                <input type="email" placeholder="请输入邮箱" name="email" value="IKUN@qq.com" readonly />
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">博客</td>
		                            <td>
		                                <input type="url" name="url" placeholder="请输入博客地址" disabled />
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">颜色</td>
		                            <td>
		                                <input type="color" name="color" class="" id="" />
		                            </td>
		                        </tr>
		                        <tr>
		                            <td align="right">自我评价</td>
		                            <td>
		                                <textarea name="evaluate" cols="30" rows="10"></textarea>
		                            </td>
									<img src="img/IKUN.jpg" alt="cxk" width="40px" align="right"/>
		                        </tr>
		                        <tr>
		                            <td>
		                                <input type="number" value="2" min="0" max="10" step="2" name="score" />
		                            </td>
		                            <td>
		                                <input type="range" value="2" min="0" max="10" step="2" name="range" />
		                            </td>
		                            <td>
		                                <input type="search" name="search" />
		                            </td>
		                        </tr>
		                    </table>
		                </fieldset>
		            </td>
		        </tr>
		        <tr>
		            <td align="center">
		                <input type="submit" value="提交" />
		                <input type="reset" value="重置" />
		            </td>
		        </tr>
		        </tr>
		    </table>
		</form>	
	</body>
</html>